@import '../partials/variables';

.tapeContainer {
  background: $panel-background;
  border: $panel-border;
  box-shadow: 1px 1px 0 $panel-border-color;
  margin-bottom: 10px;
  padding: $padding-base-vertical $padding-base-horizontal;
}

.tape {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 5px;
  margin-top: 5px;
}

.tapeCell {
  min-width: 40px;
  text-align: center;
}

.tapeCellIndex {
  padding: ($padding-base-vertical / 2) ($padding-base-horizontal / 2);
}

.tapeCellValue {
  border: $panel-border;
  padding: ($padding-base-vertical / 2) ($padding-base-horizontal / 2);

  &.tapeCurrent {
    background: #e3f2fd;
    font-weight: bold;
    position: relative;

    &::before {
      $size: 20px;
      border-bottom: ($size / 2) solid #f44336;
      border-left: ($size / 2) solid transparent;
      border-right: ($size / 2) solid transparent;
      bottom: -($size / 4);
      content: ' ';
      height: 0;
      left: calc(50% - #{$size / 2});
      position: absolute;
      width: 0;
    }
  }
}
